<template>
  <!-- 主图及通知 -->
  <div>
    <div class="her">
      <div>
        <img src="../assets/images/h01.jpg" style="width: 100%" />
      </div>
      <!-- 通知 -->
      <div class="chooseNumber-box">
        <div class="icon">
          <i class="iconfont icon-laba"></i>
        </div>

        <vue-seamless-scroll
          :data="itemText"
          :class-option="defaultOption"
          class="page-example3"
        >
          <ul class="ul-scoll">
            <li v-for="(item, index) in itemText" :key="index">
              <span>{{ item.name }}</span
              ><span class="fontColorTheme">{{ item.number }}</span>
              <span>{{ item.other }}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
        <div class="applyNumber">
          <span class="applyNumber-span">
            已有<span>{{ nuNumber }}</span
            >人申请
          </span>
        </div>
      </div>
    </div>
    <div>
      <mainData></mainData>
    </div>
  </div>
</template>

<script>
import mainData from "@/components/mainData";
import maiorderDetailsnData from "@/components/orderDetails";

export default {
  components: {
    mainData,
    maiorderDetailsnData,
  },
  data() {
    return {
      nuNumber: "13357",
      itemText: [
        {
          name: "张**抢得靓号132",
          number: "9999",
          other: "****",
        },
        {
          name: "王**抢得靓号130",
          number: "666",
          other: "****1",
        },
        {
          name: "钟**抢得靓号155",
          number: "999",
          other: "6****",
        },
        {
          name: "潘**抢得靓号1",
          number: "666789",
          other: "****",
        },
        {
          name: "张**抢得靓号131",
          number: "1314",
          other: "****",
        },
        {
          name: "赵**抢得靓号137",
          number: "8898",
          other: "****",
        },
        {
          name: "孙**抢得靓号135",
          number: "9999",
          other: "****",
        },
        {
          name: "李**抢得靓号131",
          number: "6666",
          other: "****",
        },
        {
          name: "王**抢得靓号175",
          number: "0001",
          other: "****",
        },
      ],
    };
  },
  methods: {
    applyNumberTitm() {
      let unm = 12357;
      let _this = this;
      setInterval(function () {
        _this.nuNumber = unm += 2;
      }, 3000);
    },
  },
  mounted() {
    this.applyNumberTitm();
  },
  computed: {
    defaultOption() {
      return {
        step: 1.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style scoped>
.her {
  background-color: #1A1107;
}

.page-example3 {
  overflow: hidden;
  height: 0.6rem;
  line-height: 0.6rem;
  width: 4.6999rem;
  /* padding-right: 1rem; */
  margin: auto;
  color: #fff;
}
.ul-scoll {
  width: 2800px;
  /* font-size: 0.2rem; */
  font-weight: 400;
}
.ul-scoll li {
  float: left;
  margin-right: 3rem;
  font-size: 0.4rem;
}
.chooseNumber-box {
  display: flex;
  pointer-events: none;
  width: 92%;
  margin: auto;
  
  background-color: #0D0803;
  border-radius: 0.2rem;
}
.icon {
  float: left;
  width: 8%;
  height: 1.1rem;
  line-height: 1.1rem;
  margin: auto;
  color: #fff;
  text-align: center;
}
.icon i {
  font-size: 0.5rem !important;
}
.applyNumber {
  float: right;
  height: 0.2rem;
  border-radius: 0.8rem;
  font-weight: 600;
  line-height: 0.2rem;
  text-align: center;
  margin: auto;
  margin-right: 0;
  /* background-color: #2c0278; */
  color: #fff;
}
.applyNumber-span {
  text-align: center;
  margin-right: 0.3rem;
}
span {
  line-height: 0.2rem;
}
.fontColorTheme {
  color: #ff7900;
}
</style>